<template>
	<view class="login-page" style="position: relative;">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7" left-icon="back"
			 title="新用户注册" @clickLeft="back"/>
		<view class="login-warp">
			<form class="form-warp" @submit="formSubmit">
				<view class="account">
					公司
				</view>
				<view class="input-group">
					<input v-model="fsitename" @blur="fsitenameBlur" name="fsitename" placeholder="请输入您的公司名称" />
					<!-- <ep-select v-model="fsiteNo" name="fsiteNo" :options="fsiteList" @change="fsiteChange"></ep-select> -->
				</view>
				<view class="textSize">
					姓名
				</view>
				<view class="input-group">
					<input v-model="username" name="username" placeholder="请输入您的姓名" />
				</view>
				<view class="textSize">
					邮箱
				</view>
				<view class="input-group">
					<input v-model="email" name="email" placeholder="请输入您的邮箱" />
				</view>
				<view class="textSize">
					手机
				</view>
				<view class="input-group" style="display: flex;justify-content: space-between">
					<input style="width: 65%;" type="number" v-model="phone" name="phone" placeholder="请输入您的手机号" />
					<button v-if="btnFlag" style="width: 104px;font-size: 16px;margin: 0 !important;background-color: #E3EDF7 !important;color: #113A62;opacity: 0.7;" class="uni-button">{{btnNumber}}S</button>
					<button v-else @click="getCode()" style="width: 104px;font-size: 16px;margin: 0 !important;background-color: #E3EDF7 !important;color: #113A62;opacity: 0.7;" class="uni-button">发送短信</button>
				</view>
				<view class="textSize">
					验证码
				</view>
				<view class="input-group">
					<input v-model="verifyCode" name="verifyCode" placeholder="请输入验证码" />
				</view>
				<button style="margin-top: 60px;" form-type="submit" class="uni-button">注册</button>
			</form>
		</view>
		
		<!-- 成功失败提示 -->
		<view v-if="isSuccess == 0 || isSuccess == 1" :class="isSuccess == 0 ? 'success' : 'error'">
			<view class="success_title">
				<view>
					<image v-show="isSuccess == 0" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/success.png" mode=""></image>
					<image v-show="isSuccess == 1" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/error.png" mode=""></image>
					<text class="success_text">通知</text>
				</view>
				<view>
					<image @click="successClose()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
				</view>
				
			</view>
			<view class="success_content">
				{{successContent}}
			</view>
		</view>
		
	</view>
</template>
<script>
	var that;
	
	export default {
		data() {
			return {
				fsitename:'', // 公司名称
				fsiteNo: '', // 公司id
				fsiteList: '', // 公司列表
				username: '', // 姓名
				email: '', // 邮箱
				phone: '', // 手机号
				verifyCode:'', // 验证码
				btnFlag: false, // 短信验证码倒计时
				btnNumber: 60, // 短信验证码倒计时
				isSuccess: null,
				successContent: '', // 报错提示内容
			}
		},
		onLoad() {
			that = this;
			that.fsiteList = []
			that.$http.get('data/area/list', {
				limit: -1,
				fsiteLevel: 3,
			}).then(e => {
				console.log('e111',e)
				e.list.forEach(item => {
					that.fsiteList.push({value:item.fsiteNo,label: item.fsiteName})
				})
			}).catch(()=>{
				that.fsiteList = []
			})
		},
		methods: {
			// 公司名称
			fsitenameBlur(e){
				console.log('e.detail.value.trim()',e.detail.value.trim())
				let temp = that.fsiteList.find((a)=>(a.label) == e.detail.value.trim())
				if(temp == undefined){
					that.successContent = '公司名称不正确'
					that.isSuccess = 1
					setTimeout(function(){
						that.isSuccess = null
					},2000)
				}else{
					that.fsiteNo = temp.value
				}
			},
			fsiteChange(e){
				console.log('楼栋改变',e)
				that.fsiteNo = e
			},
			successClose(){
				that.isSuccess = null
			},
			// 获取验证码
			getCode(){
				var phoneReg=/^1[3-9][0-9]{9}$/
				if(phoneReg.test(that.phone)){
					that.$http.get('data/person/sendVerifyCode', {
						phone:that.phone,
					}).then(e => {
						that.btnFlag = true
						let timeSet = setInterval(()=>{
							that.btnNumber -= 1
							if(that.btnNumber == 0){
								clearInterval(timeSet)
								that.btnFlag = false
								that.btnNumber = 60
							}
						},1000)
					}).catch((e)=>{
						console.log('e',e)
						if(e){
							that.successContent = e
						}else{
							that.successContent = '获取验证码失败！'
						}
						that.isSuccess = 1
						setTimeout(function(){
							that.isSuccess = null
						},2000)
					})
				}else{
					that.successContent = '手机号格式不正确'
					that.isSuccess = 1
					setTimeout(function(){
						that.isSuccess = null
					},2000)
				}
				
			},
			formSubmit(e) {
				var formdata = e.detail.value;
				if (that.validate(formdata)) {
					if(formdata.fsitename&&formdata.username && formdata.email && formdata.phone && formdata.verifyCode){
						formdata.fsiteNo = that.fsiteNo
						that.$http.get('data/person/registerPhone',formdata)
						.then(e => {
							that.successContent = '注册成功！'
							that.isSuccess = 0
							setTimeout(function(){
								that.isSuccess = null
								that.$util.reLaunch('login/index');
							},2000)
						}).catch((e) => {
							if(e){
								that.successContent = e
							}else{
								that.successContent = '注册失败！'
							}
							that.isSuccess = 1
							setTimeout(function(){
								that.isSuccess = null
							},2000)
						});
					}else{
						that.successContent = '请将个人信息填写完整再提交！'
						that.isSuccess = 1
						setTimeout(function(){
							that.isSuccess = null
						},2000)
					}
					
				}
			},
			validate(formdata) {
				// if (!that.$util.validate(formdata.uid, "账号不能为空")) return false;
				// if (!that.$util.validate(formdata.upwd, "密码不能为空")) return false;
				return true;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>
<style>
	@import url("register.css");
	.success{
		width: 80%;
		height: 116px;
		background: linear-gradient(0deg, rgba(225, 255, 220, 0.5), rgba(225, 255, 220, 0.5)), #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 16px;
	}
	.error{
		width: 80%;
		height: 116px;
		background: linear-gradient(0deg, rgba(255, 40, 40, 0.2), rgba(255, 40, 40, 0.2)), #FFFFFF;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 16px;
	}
	.success_title{
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* padding: 18px; */
	}
	.success_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 28px;
		color: #113A62;
		margin-left: 10px;
	}
	.success_content{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #113A62;
		margin-top: 6px;
	}
</style>
